<style lang="scss" scope>
.quality {
    width: 100%;
    display: flex;
    &>div {
        flex: 1;
        .pic-show{
            overflow: hidden;
        }
        .quality-title {
            margin: 0 auto 20px;
            font-size: 18px;
            color: #666;
            text-align: center;
            font-weight: 600;
        }
        .qualityPic {
            height: auto;
            background: #ffffff;
            border-radius: 10px;
            padding: 30px;
            padding-bottom: 20px;
            box-shadow: 0 0 10px 0 #cfcfcf;
        }
        .pic-item {
            text-align: center;
        }
        .pic-items {
            float: left;
            text-align: center;
        }
        .qualityPic2 {
            display: flex;
            padding: 177px 30px !important;
            .pic-items {
                flex: 1;
            }
        }
    }
    &>div+div {
        margin-left: 30px;
    }
}

.quality-table {
    margin-top: 20px;
    .quality-title {
        margin: 0 auto 20px;
        font-size: 18px;
        color: #666;
        text-align: center;
        font-weight: 600;
    }
}
</style>
<template>
    <div>
        <div class='quality'>
            <div v-if="picLeftList.length!=0">
                <div class="quality-title">{{picLeftTitle}}</div>
                <div class='qualityPic' v-model="picLeftList">
                    <div class="pic-item" v-for="(item,index) in picLeftList" :key="index" @click="mouseCoverLeft(index)">
                        <img :src="imgUrl+item.fileName" height="300" width="100%" title="点击查看大图">
                    </div>
                </div>
                <Modal v-model="picShowLeft" width="1200" :mask-closable="false">
                    <div class="pic-show" v-model="picLeftModal">
                        <img :src="src" width="100%">
                    </div>
                </Modal>
            </div>
            <div v-if="picRightList.length!=0">
                <div class="quality-title">{{picRightTitle}}</div>
                <div class='qualityPic qualityPic2' v-model="picRightList" style="overflow:hidden;">
                    <div class="pic-items" v-for="(item,index) in picRightList" :key="index" @click="mouseCoverRight(index)">
                        <img :src="imgUrl+item.fileName" height="300" width="70%" title="点击查看大图">
                    </div>
                </div>
                <Modal v-model="picShowRight" width="500" :mask-closable="false">
                    <div class="pic-show" v-model="picRightModal">
                        <img :src="src" width="100%">
                    </div>
                </Modal>
            </div>
        </div>
        <div v-if="tableList.length!=0" class="quality-table">
            <div class="quality-title">{{tableTitle}}</div>
            <div style="box-shadow: 0 0 10px 0 #cfcfcf;border-radius:10px;overflow: hidden;">
                <el-table :data="tableList" border default-expand-al="true" height="300">
                <el-table-column prop="fieldname" label="项目名称"></el-table-column>
                <el-table-column prop="description" label="描述"></el-table-column>
                <el-table-column prop="zd_1" label="数值"></el-table-column>
            </el-table>
            </div>
            
        </div>
    </div>
</template>
<script>
// 引入任务管理方法
import {
    task,tumourTask
} from 'api/index.js';
// 全局图片路径
import { imgUrl } from '@/common/js/Base.js'
export default {
    name: "quality-control",
    data() {
        return {
            imgUrl: imgUrl.imgurl,   // 图片路径前缀
            qualityShow: true,
            picShowLeft: false,       // 大图盒子隐藏
            picShowRight: false,
            picLeftList: [],        // 左侧图标
            picLeftTitle: null,     // 左侧图片标题
            picRightList: [],       // 右侧图标
            picRightTitle: null,    // 右侧图片标题
            tableList: [],           // 表格数据
            tableTitle: null,        // 表格标题
            picLeftModal: {},
            picRightModal: {},
            show: true,
            src: ""
        }
    },
    // 实例创建时
    created() {
        this.getJobProgressInfoById();
        if (this.$store.state.projectid == 1) {
            this.show = true;
        } else if (this.$store.state.projectid == 2) {
            this.show = false;
        }
    },
    watch: {

    },
    methods: {
        getJobProgressInfoById() {
            let obj = {
                jobId: this.$store.state.jobid,//'4726604a708345d7ae2fa96afab162a1',
                analysisStep: "1"
            }
            let taskUrl = task;
            if(this.$store.state.productId == 3){
                taskUrl = tumourTask;
            }
            taskUrl.getTaskInfoById(obj).then((data) => {
                if (data.returnCode == 0 || data.returnCode == 200) {
                    if (data.data != null) {
                        let obj = data.data.jobProcessDataList;
                        if (obj.length == 0) {
                            this.qualityShow = false;
                        } else {
                            M.each(obj, (item) => {
                                if (item.tableType == '1') {
                                    console.log(item);
                                    // 表格数据
                                    if(obj[2].files[0].jsonData){
                                        this.tableList = obj[2].files[0].jsonData.data;
                                    }
                                    this.tableTitle = item.files[0].displayName;
                                    // this.tableList = obj[2].files[0].jsonData.data;
                                    console.log(this.tableTitle)
                                }
                                // 左图内容
                                else if (item.tableType == '2') {
                                    this.picLeftTitle = item.tableName;
                                    this.picLeftList = item.files;
                                    // console.log(this.picLeftList);
                                }
                                // 右图内容
                                else if (item.tableType == '3') {
                                    this.picRightTitle = item.tableName;
                                    this.picRightList = item.files;
                                }
                            })
                        }
                    } else {
                        this.qualityShow = false;
                    }

                } else if (data.returnCode == 422 || data.returnCode == 204) {
                    this.$router.push('/login')
                } else {
                    this.$Message.error(data.msg)
                }


            })
        },
        mouseCoverLeft(index) {
            this.picLeftModal = this.picLeftList[index];
            // console.log(this.picLeftModal);
            this.picShowLeft = true;
            this.src = this.imgUrl + this.picLeftModal.fileName;
        },
        mouseCoverRight(index) {
            this.picRightModal = this.picRightList[index];
            this.picShowRight = true;
            this.src = this.imgUrl + this.picRightModal.fileName
        }
    }
}

</script>